<template>
  <div>
    <!-- 交车 -->
    <TopFilter
      :list="topFilterList"
      :cols="3"
      labelWidth="100"
      @filterChange="changeHandle"
      @onCollapse="collapseHandle"
    ></TopFilter>
    <!-- 下方表格 -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => this.columns = columns"
    >
      <template slot="controls">
        <el-button size="small" type="primary"  @click="addHandle">交车预约登记</el-button>
        <el-button size="small" type="primary"  @click="checkTimeTable">交车预约看板</el-button>
      </template>
    </FilterTable>
    <BaseDialog
        :visible.sync="visibleTimeTable"
        :title="'预约交车看板'"
        destroyOnClose
        width="1050px"
        :containerStyle="{height: '100%'}">
        <timeTable @close="closeTimeTable"></timeTable>
    </BaseDialog>
    <BaseDialog
        :visible.sync="visible"
        :title="dialogTitle"
        destroyOnClose
        width="1050px"
        :containerStyle="{height: '100%', overflow: 'auto'}">
        <PreDeliveryRegister :type="handleType" :rowData="formData" @close="closeHandler"></PreDeliveryRegister>
    </BaseDialog>
  </div>
</template>
<script>
import { qryDeliveryManagePage } from '@/api/retail/salesmanage/deliveryManagement';
import { vehicleConfiguration } from '@/api/retail/salesmanage/confirmcar'; //获取五级菜单
import { getUsersByPosition } from '@/api/retail/salesmanage/salesordermanage';
import PreDeliveryRegister from './preDeliveryRegister'
import timeTable from './timeTable'
import { dictionary } from '@/utils/dictMixin';
import moment from 'moment';
export default {
  name: 'deliveryManagement',
  mixins: [dictionary],
  components: {
    PreDeliveryRegister,
    timeTable
  },
  data() {
    return {
      topFilterList: this.createTopFilters(),
      fetchParams: {},
      fetchApi: qryDeliveryManagePage,
      columns: this.createTableColumns(),
      visible: false, //
      dialogTitle: '交车预约登记',
      formData: '',
      handleType: 'add',
      visibleTimeTable: false
    };
  },
  methods: {
    createTopFilters() {
      return [
	      {
	        type: 'RANGE_DATE',
	        label: '预计交车时间点',
	        fieldName: 'deliveringDateStart|deliveringDateEnd',
	        placeholder: '请选择日期...'
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'customerName',
          placeholder: '请输入...',
        },
        {
	        type: 'SELECT',
	        label: '销售顾问',
	        fieldName: 'consultant',
	        placeholder: '请选择',
          itemList: [],
	      },
        {
		      type: 'INPUT_CASCADER',
		      label: '车型配置',
		      fieldName: 'carName',
		      placeholder: '请选择',
		      options:{ titles: ['品牌', '车系', '车型'] },
		      itemList:[],
		    },
        {
	        type: 'SELECT',
	        label: '交车地点',
	        fieldName: 'confirmedAddress',
	        placeholder: '请选择',
          itemList: [],
	      },
      ];
    },
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 90,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.editHandle(props.row)}>编辑</el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
	      {
	        title: '销售订单号',
	        dataIndex: 'viNo',
	        // sorter: true,
	        // filter: true,
	        // filterType: 'checkbox',
	        // filterItems: this.createDictList('1404'),
	        // render: props => {
	        //   return <span>{this.createDictText(props.row.soStatus, '1404')}</span>;
	        // }
        },
        {
          title: '客户名称',
	        dataIndex: 'customerName',
        },
        {
          title: '手机号',
	        dataIndex: 'mobilePhone',
        },
        {
          title: '所属销售顾问',
	        dataIndex: 'consultant',
        },
        {
          title: '订单车辆类别',
          dataIndex: 'vehiclePurpose',
          filter: true,
	        filterType: 'checkbox',
          filterItems: this.createDictList('1052'),
        },
        {
          title: '交车地点',
          dataIndex: 'confirmedAddress',
        },
        {
          title: 'VIN',
          dataIndex: 'salesVin',
          width: 150,
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
        },
        {
          title: '车型',
          dataIndex: 'modelName',
        },
        {
          title: '配置',
          dataIndex: 'packageName',
        },
        {
          title: '颜色',
          dataIndex: 'colorName',
        },
        {
          title: '预计交车开始时间',
          dataIndex: 'deliveringDateStart',
          render: props => {
            return (<span>{this.preDateHandler(props.row.deliveringDateStart)}</span>)
          }
        },
        {
          title: '预计交车结束时间',
          dataIndex: 'deliveringDateEnd',
          render: props => {
            return (<span>{this.preDateHandler(props.row.deliveringDateEnd)}</span>)
          }
        }
      ];
    },
    // 查看交车看板
    checkTimeTable () {
      this.visibleTimeTable = true
    },
    // 关闭交车看板
    closeTimeTable () {
      this.visibleTimeTable = false
    },
    addHandle () {
      this.formData = null
      this.dialogTitle = '交车预约登记'
      this.visible = true
      this.handleType = 'add'
    },
    editHandle (row) {
      this.formData = row
      this.dialogTitle = '交车预约登记编辑'
      this.visible = true
      this.handleType = 'edit'
    },
    init () {
      this.carType()
      this.getEmployeeList()
    },
    carType (){
      vehicleConfiguration(0, {
        isUnlimited: 10041001,
        level: 3
      }).then( res => {
        this.topFilterList.find(item => item.fieldName == 'carName').itemList = res.data;
      }).catch( err => {
      })
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    closeHandler(type) {
      this.visible = false;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    async getEmployeeList() {
      let params = {
        positionCodes: [10061015],
        menuId: 223001
      }
      const res = await getUsersByPosition(params);
      // console.log('销售顾问', res)
      if (res.resultCode === 200) {
        let orginList = res.data.map(x => ({ value: x.userId, text: x.userName }));
        this.consultantList = orginList.filter((item,index,array) => {
          return array.findIndex(el=>el.value==item.value)===index
        })
        this.topFilterList.find(item => item.fieldName == 'consultant').itemList = this.consultantList;
      }
    },
    // 日期预处理
    preDateHandler(val, formatCode='YYYY-MM-DD HH:mm:ss') {
      let resultDate = val ? moment(Number(val)).format(formatCode) : val;
      if ((resultDate == 'Invalid date' || resultDate == 'Invalid Date') && val) {
        resultDate = moment(val).format(formatCode)
      }
      return resultDate;
    },
  },
  created() {
    this.init()
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  }
};
</script>

<style lang="less" scoped>
</style>
